<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>${fns:getConfig('productName')}</title>
    <%@include file="/WEB-INF/views/include/nhead.jsp" %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #messageBox i{
            position: relative;
            top: 2px;
        }
        label.error{
            margin-left: 26px;
        }
    </style>
</head>
<body class="background-dark" style="overflow: hidden;">
<div class="row" id="loginArea">
    <div class="text-align-center" style="font-size: 45px;font-weight: bolder ;margin: 110px auto">${fns:getConfig('productName')}</div>
    <!--[if lte IE 6]><br/>
</div>
    <![endif]-->
    <div class="row">
        <div id="messageBox" style="width: 440px;margin: auto;margin-top: -63px;margin-bottom: 60px;display: none" class=" alert alert-danger" role="alert">
            <i class="glyphicon glyphicon-info-sign pull-left"></i>
        </div>
    </div>
    <div class="row">
        <section class="widget login-widget" style="margin: auto;">
            <header class="text-align-center">
                <h4>用户登录</h4>
            </header>
            <div class="body">
                <form class="no-margin" id="loginForm" action="${ctx}/login" method="post">
                    <input type="hidden" id="loginFail" value="${loginFail}">
                    <fieldset>
                        <div class="form-group">
                            <label for="username">帐号</label>
                            <div class="input-group input-group-lg">
                                <div class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </div>
                                <input id="username" name="username" type="text" value="${username}" class="form-control input-lg input-transparent required" placeholder="您的帐号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <div class="input-group input-group-lg">
                                <div class="input-group-addon">
                                    <i class="fa fa-lock"></i>
                                </div>
                                <input id="password" name="password" type="password" value="${password}" class="form-control input-lg input-transparent required" placeholder="您的密码">
                            </div>
                        </div>
                        <c:if test="${isValidateCodeLogin}">
                            <div class="form-group">
                                <label for="validateCode">验证码</label>
                                <div class="input-group input-group-lg">
                                    <div class="input-group-addon">
                                        <i class="glyphicon glyphicon-check"></i>
                                    </div>
                                    <sys:validateCode name="validateCode"/>
                                </div>
                            </div>
                        </c:if>
                    </fieldset>
                    <div class="form-actions" style="margin:0 -17px;padding:20px 15px">
                        <button type="submit" class="btn btn-block btn-lg btn-danger">
                            <span class="small-circle"><i class="fa fa-caret-right"></i></span>
                            <small>登录</small>
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
<div class="row" id="chromeDowArea" style="display: none">
    <div class="col-lg-8 col-sm-6 col-xs-10 col-lg-offset-2 col-sm-offset-3 col-xs-offset-1">
        <div class="error-container">
            <h1 class="error-code"><i><img style="width: 18%;margin-right: 8px;" src="${ctxStatic}/lightblue/img/google.png"></i></h1>
            <h1>本系统指定在谷歌浏览器下运行</h1>
            <a href="${baseUrlPath}/demo/file/file.exe" class="btn btn-primary" style="font-size: 16px;margin-right: 20px;margin-top: 60px;">
                <span class="fa fa-windows" style="font-size: 21px"></span>
                &nbsp;&nbsp;点击下载
            </a>
            <a href="${baseUrlPath}/demo/file/file.exe" class="btn btn-primary" style="font-size: 16px;margin-right: 20px;margin-top: 60px;">
                <span class="fa fa-apple" style="font-size: 21px"></span>
                &nbsp;&nbsp;点击下载
            </a>
        </div>
    </div>
</div>

<script type="text/javascript">
    (function () {
        if (navigator.userAgent.indexOf("Chrome") < 0) {
            $("#loginArea").hide();
            $("#chromeDowArea").show();
        }
    }());

    var loginFail = $("#loginFail").val();
    $(document).ready(function () {
        $("#loginForm").validate({
            rules: {
                validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
            },
            messages: {
                username: {required: "请填写用户名. "}, password: {required: "请填写密码. "},
                validateCode: {remote: "验证码不正确. ", required: "请填写验证码. "}
            },
            errorContainer: "#messageBox",
            errorLabelContainer: "#messageBox"
        });

        if(loginFail!=null && loginFail!=""){
            Messenger().post(loginFail);
        }
    });
    // 如果在框架或在对话框中，则弹出提示并跳转到首页
    if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
        alert('未登录或登录超时。请重新登录，谢谢！');
        top.location = "${ctx}";
    }
</script>
</body>
</html>